<template>
	<view class="container">
		<view class="example">
			<uni-forms ref="baseForm" :modelValue="baseFormData" :rules="rules">
				<uni-forms-item label="维修方式" style="font-weight: bold;">
					<uni-data-checkbox style="display: block; margin-top: 10rpx;" v-model="baseFormData.repairMethod"
						:localdata="repairMethods" />
				</uni-forms-item>
				<text style="display: block; margin-top: -40rpx;margin-bottom: 20rpx; font-weight: bold;">客户信息</text>
				<uni-forms-item label="车主姓名" class="form-item" name="name">
					<uni-easyinput v-model="baseFormData.name" placeholder="请输入车主姓名" />
					<text v-if="!baseFormData.name && baseFormData.nameIsError" class="error-text">请输入车主姓名</text>
				</uni-forms-item>
				<uni-forms-item label="联系方式" class="form-item" name="contact">
					<uni-easyinput v-model="baseFormData.contact" placeholder="请输入联系方式" />
					<text v-if="!baseFormData.contact && baseFormData.contactIsError" class="error-text">请输入联系方式</text>
				</uni-forms-item>
				<uni-forms-item label="预约时间" class="form-item" name="appointmentTime">
					<uni-datetime-picker type="datetime" return-type="timestamp" placeholder="请选择时间"
						v-model="baseFormData.appointmentTime" />
					<text v-if="!baseFormData.appointmentTime && baseFormData.appointmentTimeIsError"
						class="error-text">请选择预约时间</text>
				</uni-forms-item>
				<uni-forms-item label="取车位置" class="form-item" v-if="baseFormData.repairMethod === 1"
					name="pickupLocation">
					<uni-easyinput v-model="baseFormData.pickupLocation" placeholder="请输入取车位置" />
				</uni-forms-item>
				<text style="display: block; margin-top: 0rpx;margin-bottom: 13rpx; font-weight: bold;">车辆信息</text>
				<view style="margin-bottom: 30rpx;" name="vehicleType">
					<text style="">车辆类型</text>
					<uni-data-select style="width: 60%; display:inline-block;margin-left: 16rpx;"
						v-model="baseFormData.vehicleType" :localdata="vehicleTypes" @change="change"
						:clear="false"></uni-data-select>
				</view>
				<uni-forms-item label="车牌号" class="form-item" name="licensePlate">
					<uni-easyinput v-model="baseFormData.licensePlate" placeholder="请输入车牌号" />
					<text v-if="!baseFormData.licensePlate && baseFormData.licensePlateIsError"
						class="error-text">请输入车牌号</text>
				</uni-forms-item>
				<text style="display: block; margin-top: 0rpx;margin-bottom: 13rpx; font-weight: bold;">照片</text>
				<view class="example-body">
					<uni-file-picker limit="5" title="整车照片:" ref="filePicker1" />
				</view>
				<view class="example-body">
					<uni-file-picker limit="5" title="维修部位照片:" ref="filePicker2" />
				</view>
				<view class="button-group">
					<button style="width: 350rpx;" type="primary" size="mini" @click="submit('baseForm')">提交</button>
				</view>
			</uni-forms>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				baseFormData: {
					mid: "",
					name: '',
					contact: '',
					appointmentTime: '',
					repairMethod: 0,
					pickupLocation: '',
					vehicleType: "0",
					licensePlate: '',
					// 添加其他需要的字段
					nameIsError: false,
					contactIsError: false,
					appointmentTimeIsError: false,
					licensePlateIsError: false,
					pickupLocationIsError: false,
					vehicle_photos: "",
					repair_photos: "",
				},
				rules: {
					name: {
						rules: [{
							required: true,
							errorMessage: '请输入车主姓名'
						}]
					},
					contact: {
						rules: [{
							required: true,
							errorMessage: '请输入联系方式'
						}]

					},
					appointmentTime: {
						rules: [{
							required: true,
							errorMessage: '请选择预约时间'
						}]
					},
					licensePlate: {
						rules: [{
							required: true,
							errorMessage: '请输入车牌号'
						}]
					},
					vehicleType: {
						rules: [{
							required: true,
							errorMessage: '请选择车辆类型'
						}]
					},
					pickupLocation: {
						rules: [{
							required: true,
							errorMessage: '请输入取车位置'
						}]
					}
					// 根据需要添加其他验证规则
				},
				repairMethods: [{
						text: '到店维修',
						value: 0
					},
					{
						text: '上门取车',
						value: 1
					}
				],
				vehicleTypes: [{
						text: '轿车',
						value: 'sedan'
					},
					{
						text: 'SUV',
						value: 'suv'
					},
					{
						text: 'MPV',
						value: 'mpv'
					}
					// 根据需要添加更多车辆类型
				],
				showErrorMsg: false,
				errorMsg: '',
				showSuccessMsg: false,
				successMsg: ''
			};
		},
		methods: {
			submit(ref) {
				this.$refs[ref].validate().then(res => {
					// 检查图片数量是否至少为 2
					const filePicker1 = this.$refs.filePicker1;
					const filePicker2 = this.$refs.filePicker2;
					if (filePicker1.files.length < 1) {
						uni.showToast({
							title: '整车照片至少上传 1 张图片',
							icon: 'none'
						});
						return false;
					}
					if (filePicker2.files.length < 1) {
						uni.showToast({
							title: '维修部位照片至少上传 1 张图片',
							icon: 'none'
						});
						return false;
					}
					// 验证成功，发送请求
					uni.request({
						url: 'http://localhost:8080/merchant/reservation',
						method: 'POST',
						data: this.baseFormData,
						header: {
							// 'Content-Type': 'application/json', // 设置请求头为 JSON 格式
							'Authorization': 'Bearer' + wx.getStorageInfoSync('token') // 设置认证令牌
						},
						success: (res) => {
							console.log(res)
							if (res.data && res.data.code === 200) {
								uni.showToast({
									title: '提交成功'
								});
								uni.navigateTo({
									url: "/pages/orderPayment1/orderPayment1"
								});
							} else {
								console.error('请求失败', res);
								uni.showToast({
									title: '提交失败',
									icon: 'none'
								});
							}
							console.log('表单数据:', this.baseFormData);
							this.showSuccessMsg = true;
							this.successMsg = '提交成功！';
						}
					});
				}).catch(err => {
					if (this.rules.pickupLocation && this.rules.pickupLocation.rules && this.rules.pickupLocation
						.rules.length > 0) {
						this.baseFormData.pickupLocationIsError = !this.baseFormData.pickupLocation
					} else {
						this.baseFormData.pickupLocationIsError = false;
					}
					console.log('表单验证失败');
					return false;
				});
			},
			change(value) {
				console.log('车辆类型改变:', value);
			}
		}
	};
</script>

<style scoped>
	.container {}

	.error-text {
		color: red;
		font-size: 12px;
		margin-top: 5px;
	}

	.example {
		background-color: #f9f9f9;
		padding: 30rpx;
		border-radius: 10rpx;
	}

	.form-item {
		margin-bottom: 38rpx;
	}

	.button-group {
		text-align: center;
		margin-top: 30rpx;
	}

	.error-message {
		color: red;
		text-align: center;
		margin-top: 10px;
	}

	.success-message {
		color: green;
		text-align: center;
		margin-top: 10px;
	}
</style>